<!--
 * @Author: tian_biao
 * @Date: 2021-08-16 20:15:08
 * @LastEditTime: 2021-08-17 13:59:45
 * @Description: 跟踪记录
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left"  @click="back"/>
                </template>
            </Theader>
        </div>
        <div class="conBox mt1rem">
            <van-steps direction="vertical" inactive-icon="stop-circle-o" active-icon="stop-circle-o"
                active-color="#17b49b" inactive-color="#17b49b">
                <van-step>
                    <h3 class="color333">2016-07-11</h3>
                    <div class="message">
                        <div class="messageBox">
                            <van-icon name="warning" />
                            <div class="messageText ml1rem">当前天气清凉的情况下暂未出现</div>
                        </div>
                    </div>

                    <div class="mt1rem colorccc">
                        <div class="ml1rem">登记人：刘安之</div>
                    </div>
                    <div class="mt1rem colorccc">
                        <div class="ml1rem">登记人：2021/02/12 12:00:00</div>
                    </div>
                </van-step>
                <van-step>
                    <h3 class="color333">2016-07-11</h3>
                    <div class="message">
                        <div class="messageBox">
                            <van-icon name="warning" />
                            <div class="messageText ml1rem">当前天气清凉的情况下暂未出现</div>
                        </div>
                    </div>

                    <div class="mt1rem colorccc">
                        <div class="ml1rem">登记人：刘安之</div>
                    </div>
                    <div class="mt1rem colorccc">
                        <div class="ml1rem">登记人：2021/02/12 12:00:00</div>
                    </div>
                </van-step>
                <van-step>
                    <h3 class="color333">2016-07-11</h3>
                    <div class="message">
                        <div class="messageBox">
                            <van-icon name="warning" />
                            <div class="messageText ml1rem">当前天气清凉的情况下暂未出现</div>
                        </div>
                    </div>

                    <div class="mt1rem colorccc">
                        <div class="ml1rem">登记人：刘安之</div>
                    </div>
                    <div class="mt1rem colorccc">
                        <div class="ml1rem">登记人：2021/02/12 12:00:00</div>
                    </div>
                </van-step>


            </van-steps>
        </div>
        <div class="btnBox">
            <div class="emit" @click="addTrackRecord">添加跟踪记录</div>
        </div>
        <van-popup v-model="show">
            <div class="addConBox">
                <h4>跟踪备注</h4>
                <van-field v-model="remark" :border="show" rows="2" autosize type="textarea" maxlength="50"
                    placeholder="请输入跟踪备注" />
                <div class="addBtnBox mt1rem">
                    <div class="cancel" @click='close'>取消</div>
                    <div class="sure" @click='close'>确定</div>
                </div>
            </div>
        </van-popup>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Utils from '@/utils/util'
    export default {
        name: 'scheduling',
        components: {
            Theader,
        },
        data() {
            return {
                title: "跟踪记录",
                show: false,
                remark: "",
            }
        },

        computed: {
           
        },

        methods: {
            
            back(){
                this.$router.go(-1)
            },
             /**
             * @description: 打开填写跟踪记录
             * @param {*}
             * @return {*}
             */
             addTrackRecord() {
                this.show=true
             },
             /**
              * @description: 确定/ 取消
              * @param {*}
              * @return {*}
              */
             close(){
                 this.show=false
             }
        },

        watch: {
        },
        mounted() {
        },
        created() {
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #f5f6fa !important;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .ml1rem {
        margin-left: 1rem !important;
    }

    .mt1rem {
        margin-top: 1rem !important;
    }

    .conBox {
        width: 95%;
        margin: 0 auto;
        height: 80vh;
        overflow-y: auto;
        background-color: #fff;
        border-radius: 4px;
    }

    .messageBox {
        width: 90%;
        margin: 0 auto;
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
    }

    .messageText {
        font-size: 12px;
    }

    .message {
        width: 99%;
        height: 2rem;
        background-color: #FFEDED;
        color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin-left: -0.7rem; */
        /* margin-top: -1rem; */
    }

    /deep/.van-step--vertical .van-step__circle-container {
        font-size: 1.5rem !important;
    }

    h3 {
        margin-top: 0%;
    }

    .colorccc {
        color: #ccc;
    }

    .color333 {
        color: #333;
    }

    .btnBox {
        width: 100vw;
        height: 4rem;
        margin-top: 1rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        bottom: 0;
    }

    .btnBox>div {
        width: 95%;
        height: 3rem;
        border-radius: 4px;
        text-align: center;
        line-height: 3rem;
    }

    .emit {
        color: #FFFFFF;
        background: #0EB295;
        border: 1px solid #0EB295;
    }

    .addConBox {
        width: 93vw;
        height: 20rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .van-popup--center {
        border-radius: 12px !important;
    }

    /deep/.van-cell {
        border: 1px solid #ccc;
        width: 90%;
        height: 9rem;
        border-radius: 4px;
    }
    .addBtnBox{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .addBtnBox>div{
        flex: 0.4;
        height: 3rem;
        line-height: 3rem;
        border-radius: 4px;
        text-align: center;
    }
    .cancel{
        border: 1px solid #0EB295;
        color: #0EB295;
    }
    .sure{
        background-color: #0EB295;
        color:#fff;
    }
</style>